<template>
  <div class="container">
    <!-- 上半部分 -->
    <div class="upper">
      <div class="title" style="font-weight: bold">关于本站</div>
      <div class="content-container">
        <div class="tech-stack">
          <div class="subtitle" style="font-weight: bold">相关项目驱动/支持</div>
          <ul>
            <li>
              <a href="https://spring.io/projects/spring-boot" rel="noopener noreferrer" target="_blank">SpringBoot
                (老朋友了)</a>
            </li>
            <li>
              <a href="https://vuejs.org/" rel="noopener noreferrer" target="_blank">Vue.js (大部分采用Vue3的语法)</a>
            </li>
            <li>
              <a href="https://vitejs.dev/" rel="noopener noreferrer" target="_blank">Vite (这个是真牛逼)</a>
            </li>
            <li>
              <a href="https://baomidou.com/" rel="noopener noreferrer" target="_blank">MyBatis Plus (数据库操作)</a>
            </li>
            <li>
              <a href="https://redis.io/" rel="noopener noreferrer" target="_blank">Redis (缓存)</a>
            </li>
            <li>
              <a href="https://tailwindcss.com/" rel="noopener noreferrer" target="_blank">TailwindCSS (用了，不会)</a>
            </li>
            <li>
              <a href="https://element-plus.org/" rel="noopener noreferrer" target="_blank">ElementPlus
                (特好用的组件库)</a>
            </li>
            <li>
              <a href="https://www.rabbitmq.com/" rel="noopener noreferrer" target="_blank">RabbitMQ (流量削峰)</a>
            </li>
            <li>
              <a href="https://github.com/SolidZORO/zpix-pixel-font" rel="noopener noreferrer" target="_blank">Zpix
                (大佬的字体太强啦)</a>
            </li>
          </ul>
        </div>

        <!-- 显示统计数据 -->
        <div class="statistics">
          <div class="subtitle" style="font-weight: bold">统计数据</div>
          <p>当前用户数：{{ data.totalData.userTotal }}</p>
          <p>当前食堂店铺条目数：{{ data.totalData.canteenShopTotal }}</p>
          <p>当前教学楼学院楼条目数：{{ data.totalData.teachingBuildingTotal }}</p>
          <p>当前运动场条目数：{{ data.totalData.playgroundTotal }}</p>
          <p>当前舞萌/中二条目数：{{ data.totalData.maimaiChunithmTotal }}</p>
          <p>全站总编辑次数：{{ data.totalData.recentEditTotal }}</p>
          <p>合计条目数：{{ data.totalData.total }}</p>
        </div>
      </div>
    </div>

    <div class="middle" style="display: flex;">
      <div class="title" style="font-weight: bold;width: 200px"><br><br>简述</div>
      <div class="article" style="line-height: 24px;font-size: 19px">
        <p>本站定题于2025年3月1日，于2025年3月6日正式开源，于2025年3月25日部署云服务器成功
        </p>
        <p>全程独立开发（前端真**的难写我一个后端快吐了）
          目前还在开发中，欢迎各路大佬提出建议</p>
        <p>
          本网站是便于大家方便的查询理工信息的网站，本网站的信息仅供参考，具体情况以实际情况为准
        </p>
        <p>移动端适配会有点差，我上面写了TailwindCSS，但我其实基本没咋用（（</p>
        <a href="https://gitee.com/liangyingjun123/infoplatform">开源地址（Gitee）</a>
      </div>
    </div>
    <!-- 下半部分 -->
    <div class="lower">
      <div class="image-text-container">
        <img alt="图片描述" class="custom-image" src="/src/assets/admire.jpg">
        <div class="admire-title" style="font-weight: bold;width: 100px;font-size: 30px;line-height: 18px">捐赠</div>
        <div class="support-text">
          <p>如果您觉得本站满意，欢迎支持网站的后续发展，帮助孩子维持服务器成本、团队管理、以及开发成本等等！</p>
          <p>开发小白（实习面试挂了QAQ），体验过程中如果有任何疑问，欢迎从本站的“意见反馈”栏畅所欲言！</p>
          <p>或者请发送邮件至488581724@qq.com 再或者在B站私信我（点击页面下方黄色的@Tn9Gsaikou跳转）</p>
          <p>赞赏请留下您的称呼，每一位支持者我都会记下并公示在小站，非常感谢每一位的支持！</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

onMounted(() => {
  fetchTotalData();
})
const data = reactive({
  title: '声明：本网站是便于大家方便的查询理工信息的网站，本网站的信息仅供参考，具体情况以实际情况为准。',
  totalData: {
    userTotal: 0,
    canteenShopTotal: 0,
    teachingBuildingTotal: 0,
    playgroundTotal: 0,
    maimaiChunithmTotal: 0,
    recentEditTotal: 0,
    total: 0
  }
});
// 获取统计数据
const fetchTotalData = () => {
  axios.get("/common/total").then(res => {
    if (res.data) {
      console.log(res.data.data);
      data.totalData = res.data.data;
    }
  }).catch(err => {
    console.error(err);
    ElMessage.error("获取统计数据失败");
  });
};
</script>

<style scoped>
.content-container {
  display: flex;
  justify-content: space-between; /* 横向排列两部分，并在两端对齐 */
  flex-wrap: wrap; /* 如果空间不足，允许换行 */
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 占满整个视口高度 */
}

.upper {
  display: flex;
  flex-wrap: wrap; /* 如果空间不足，允许换行 */
  padding: 20px; /* 添加一些内边距 */
  flex: 1; /* 占据上半部分 */
}

.tech-stack,
.statistics {
  flex: 1; /* 让两部分平分上半部分空间 */
  margin: 10px; /* 添加一些外边距 */
  width: 300px;
}

.title {
  font-size: 2rem; /* 保持原 h1 的字体大小 */
  line-height: 2rem; /* 确保高度接近字体大小 */
  height: 50px; /* 移除外边距 */
  padding: 0; /* 移除内边距 */
}

.subtitle {
  font-size: 1.5rem; /* 保持原 h2 的字体大小 */
  line-height: 1.5rem; /* 确保高度接近字体大小 */
  margin: 0; /* 移除外边距 */
  padding: 0; /* 移除内边距 */
  color: #666; /* 保持原 h2 的颜色 */
  height: 30px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0; /* 去除 ul 的默认外边距 */
}

li {
  margin: 0; /* 移除 li 的上下外边距 */
  padding: 0; /* 移除 li 的内边距 */
  line-height: 1; /* 设置行高为 1，确保文字紧密排列 */
}

a {
  text-decoration: none;
  color: #007bff;
  font-size: 1.2rem;
  display: block; /* 让 a 标签占满整个 li 的空间 */
  padding: 0.25rem 0; /* 添加少量上下内边距，使文字不显得过于拥挤 */
}

a:hover {
  text-decoration: underline;
}

.statistics p {
  margin: 5px 0;
  font-size: 18px;
  color: #333;
  line-height: 1.5;
}

.lower {
  padding: 20px; /* 添加一些内边距 */
  flex: 1; /* 占据下半部分 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.image-text-container {
  display: flex;
  align-items: center; /* 垂直居中对齐图片和文字 */
  justify-content: space-between; /* 在图片和文字之间添加一些空间 */
  width: 100%; /* 容器宽度占满父容器 */
}

.custom-image {
  width: 20%; /* 图片宽度占容器的40%，可根据需要调整 */
  height: auto; /* 保持图片的宽高比 */
  object-fit: cover; /* 确保图片覆盖整个区域 */
  border-radius: 8px; /* 添加圆角效果，使图片看起来更美观 */
}

.support-text {
  flex: 1; /* 文字部分占据剩余空间 */
  padding-left: 10px; /* 在文字和图片之间添加一些间距 */
  font-size: 1.2rem; /* 文字大小 */
  color: #333; /* 文字颜色 */
  line-height: 1.5; /* 行高 */
}

/* 暗黑模式下的样式 */
[data-theme="dark"] .container {
  background-color: #121212;
  color: #fff;
}

[data-theme="dark"] .upper {
  background-color: #1e1e1e;
}

[data-theme="dark"] .title {
  color: #fff;
}

[data-theme="dark"] .subtitle {
  color: #999;
}

[data-theme="dark"] a {
  color: #0096ff;
}

[data-theme="dark"] a:hover {
  color: #00b0ff;
}

[data-theme="dark"] .statistics p {
  color: #ccc;
}

[data-theme="dark"] .middle {
  background-color: #1e1e1e;
}

[data-theme="dark"] .article {
  color: #ccc;
}

[data-theme="dark"] .lower {
  background-color: #1e1e1e;
}

[data-theme="dark"] .image-text-container {
  background-color: #282828;
}

[data-theme="dark"] .custom-image {
  filter: brightness(0.8); /* 可以适当降低图片亮度，使其在暗黑模式下更协调 */
}

[data-theme="dark"] .support-text {
  color: #ccc;
}

[data-theme="dark"] .admire-title {
  color: #fff;
}

/* 添加过渡效果 */
[data-theme="dark"],
[data-theme="light"] {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* 添加过渡效果 */
}
</style>